/*
  学习目标：使用React路由，实现路径跳转组件切换
  步骤：
     1. 💥npm i react-router-dom@5.3
     2. 导入组件 HashRouter Route Link
     3. 使用HashRouter 和Route组件
     4. 使用Link去跳转
*/
import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';

export default class App extends React.Component {
  render() {
    // HashRouter负责路由实例化，类似 vue 中的 new Router({}),包裹住所有代码
    return (
      <HashRouter>
        {/* Link 组件，to属性代表要跳转的路径，类似 vue 中的 RouterLink，实现跳转 */}
        <Link to="/home">首页</Link>
        <br />
        <Link to="/my">我的音乐</Link>
        <br />
        <Link to="/friend">发现</Link>
        {/* Route 组件，类似 vue 中的 对象规则和挂载点 二合一 */}
        {/* path 与vue一样，只需要写路径即可，不要写 #/home */}
        <Route path="/home" component={Home}></Route>
        <Route path="/My" component={My}></Route>
        <Route path="/Friend" component={Friend}></Route>
      </HashRouter>
    );
  }
}

function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
